<template>
  <div class="myself">
    <header class="myself_header">
      <div class="myself_header_title">个人中心</div>
      <div class="myself_header_title_return" @click="gotoHomeFn">
        <img src="../assets/left.png" />
      </div>
    </header>
    <main class="myself_main">
      <div class="myself_main_top">
        <div class="myself_main_top_imgbox" @click="headerclickFn">
          <img src="../assets/header_picture.jpg" />
        </div>
        <!-- <p>剑雨星辰</p> -->
        <p>{{ personalInformation }}</p>
      </div>
      <div class="myself_main_footer">
        <ul>
          <li @click="gotoCollectFn">
            <div class="myself_main_footer_pbox">我的收藏</div>
            <div class="myself_main_footer_imgbox">
              <img src="../assets/rightGray.png" />
            </div>
          </li>
          <li>
            <div class="myself_main_footer_pbox">消息中心</div>
            <div class="myself_main_footer_imgbox">
              <img src="../assets/rightGray.png" />
            </div>
          </li>
        </ul>
      </div>
    </main>
    <footer class="myself_footer">
      <div class="myself_footer_left">
        <div class="myself_footer_left_imgbox">
          <img src="../assets/moon.png" />
        </div>
        <p>夜间模式</p>
      </div>
      <div class="myself_footer_right">
        <div class="myself_footer_right_imgbox">
          <img src="../assets/setting-one.png" />
        </div>
        <p>设置</p>
      </div>
    </footer>
    <section class="myself_section" v-if="isShow">
      <button @click="logOutFn" class="myself_section_btn">退出登录</button>
    </section>
  </div>
</template>

<style lang="less" scoped>
.myself {
  width: 100%;
  padding: 0 20px;

  .myself_header {
    width: 100%;
    padding: 15px 0;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;

    .myself_header_title {
      font-weight: 700;
    }

    .myself_header_title_return {
      position: absolute;
      top: 18px;
      left: 0;

      img {
        width: 30px;
      }
    }
  }

  .myself_main {
    width: 100%;

    .myself_main_top {
      .myself_main_top_imgbox {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 25px 0 15px 0;

        img {
          width: 80px;
          border-radius: 50%;
        }
      }

      p {
        text-align: center;
      }
    }
    .myself_main_footer {
      margin: 25px 0;

      ul {
        li {
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1px solid gray;
          padding: 15px 0;

          .myself_main_footer_pbox {
            font-size: 18px;
            color: gray;
            font-weight: 700;
          }
          .myself_main_footer_imgbox {
            img {
              width: 36px;
            }
          }
        }
      }
    }
  }

  .myself_footer {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120px;

    .myself_footer_left {
      .myself_footer_left_imgbox {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 5px 0;

        img {
          width: 40px;
        }
      }
      p {
        font-size: 16px;
        text-align: center;
      }
    }
    .myself_footer_right {
      .myself_footer_right_imgbox {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 5px 0;

        img {
          width: 40px;
        }
      }
      p {
        font-size: 16px;
        text-align: center;
      }
    }
  }

  .myself_section {
    width: 100%;
    display: flex;

    .myself_section_btn {
      width: 150px;
      height: 45px;
      background: #e0e8f6;
      border-radius: 50px;
      margin: 15px auto;
    }
  }
}
</style>

<script>
export default {
  name: "MyselfView",
  data() {
    return {
      personalInformation: "星辰日报",
      isShow: false,
    };
  },
  methods: {
    gotoHomeFn() {
      this.$router.push({ path: "/" }).catch(() => {});
    },
    logOutFn() {
      this.isShow = false;
      localStorage.removeItem("USERID");
      alert("安全退出登录成功~");
      this.loginFn();
    },
    loginFn() {
      let arrstr1 = localStorage.getItem("USERID");
      let arrstr2 = localStorage.getItem("MYLOCALUSER");
      if (arrstr1) {
        let newarr = JSON.parse(arrstr2);
        let mynewarr = newarr.filter((item) => {
          return item.id == arrstr1;
        });
        // console.log(mynewarr);
        this.isShow = true;
        this.personalInformation = mynewarr[0].user_name;
      } else {
        this.personalInformation = "请登录~~~";
      }
    },
    headerclickFn(){
      // console.log("111111");
      let arrstr1 = localStorage.getItem("USERID");
      console.log(arrstr1);
      if (arrstr1 == null) {
        this.$router.push({path: "/login"}).catch(()=>{});
      } else {
        alert("您已登录~请畅享今日日报内容叭~~~")
      }
    },
    gotoCollectFn(){
      this.$router.push({path: "/collect"}).catch(()=>{});
    },
  },
  created() {
    this.loginFn();
  },
  mounted() {},
};
</script>